<template>
	<view class="page" :style="'height:' + height + 'rpx'">
		<!-- 选择器  ——start-->
		<view class="select_row">
			<!-- 			<view class="select_col_left">
				<text>
					列数
				</text>
				<view class="select_col_left_select">
					<picker @change="bindPickerChange" :value="indexFirst" :range="arrayFirst">
						<view class="uni-input">{{arrayFirst[indexFirst]}}</view>
					</picker>
				</view>
			</view>
			<view class="select_col_right_select">
				<tex
					列选择区间
				</text>
				<view class="">
					<picker @change="bindPickerChange" :value="indexSecond" :range="arraySecond">
						<view class="uni-input">{{arraySecond[indexSecond]}}</view>
					</picker>
				</view>
			</view> -->
			<view class=" common select_col_left">
				<view class="title">行数:</view>
				<view class="content">
					<picker @change="bindPickerChange" :value="indexFirst" :range="arrayFirst">
						<view class="uni-input">{{arrayFirst[indexFirst]}}</view>
					</picker>
					<view class="iconfont icon-xuanzeqixiayige" style="color: #c0c4cc;margin-left: 5rpx;"></view>
				</view>
			</view>
			<view class="common select_col_right">
				<view class="title">列选择区间:</view>
				<view class="content">
					<picker @change="bindPickerChange" :value="indexSecond" :range="arraySecond">
						<view class="uni-input">{{arraySecond[indexSecond]}}</view>
					</picker>
					<view class="iconfont icon-xuanzeqixiayige" style="color: #c0c4cc;margin-left: 5rpx;"></view>
				</view>
			</view>
		</view>
		<!-- 选择器 ——end -->

		<!-- 鸽笼 ——start -->
		<movable-area scale-area class="tips">
		  <movable-view @scale="move" direction="all" bindchange="onChange" bindscale="onScale" :scale-value="scaleValue" scale scale-min="1" scale-max="1.2"  friction=5>
					<view style="border-radius: 30rpx;">
						<view v-for="(item,index) in cage_item" :key="index" class="tips_item">
							{{index + 1}}
						</view>
					</view>
				</movable-view>
		</movable-area>
      <movable-area scale-area >
        <movable-view @scale="move" direction="horizontal" bindchange="onChange" bindscale="onScale" scale scale-min="1" scale-max="1.3" friction=5>
			<view class="big_box">
				<view v-for="(item,index) in cage_item" :key="index" style="display: flex;">
					<!-- <view class="tips">{{index + 1}}</view> -->
					<view v-for="(item1,index1) in item" :key="item1" class="cage_item" :style="'border: 0.5vmin solid' + cageItemStyle(index,index1)" @click="toCageData(item1)"></view>
				</view>
			</view>
		</movable-view>
      </movable-area>
		<!-- 鸽笼 ——end -->

	</view>
</template>

<script>
	import {
		myRequest
	} from "../../util/api.js"
	export default {
		name: 'cage',
		meta: {
			title: "鸽笼页面",
		},
		created() {
			let that = this;
			    uni.setNavigationBarTitle({
			    			    title: "A01鸽棚"
			    			});
			uni.getSystemInfo({
				success: function(res) {
					let pxToRpxScale = 750 / res.windowWidth;
					that.height = res.windowHeight * pxToRpxScale;
				}
			});
			this.init()
			this.getCageList()
		},
		data() {
			return {
				height: 0,
				x: 60,
				y: 60,
				arrayFirst: ['1', '2', '3', '4'],
				indexFirst: 0,
				arraySecond: ['1-10列', '11-20列', '21-30列'],
				indexSecond: 0,
				cage_item: [],
				scaleValue: 1 //放大倍数
			}
		},
		computed: {
		},
		methods: {
			    init() {
			      this.tableData = [];
			      for (let i = 1; i <= 10; i++) {
			        let obj = {};
			        obj.one = `A${i}${this.indexSecond === 0 ? "0" + 1 : this.indexSecond * 10 + 1}`;
			        obj.two = `A${i}${this.indexSecond === 0 ? "0" + 2 : this.indexSecond * 10 + 2}`;
			        obj.three = `A${i}${this.indexSecond === 0 ? "0" + 3 : this.indexSecond * 10 + 3}`;
			        obj.four = `A${i}${this.indexSecond === 0 ? "0" + 4 : this.indexSecond * 10 + 4}`;
			        obj.five = `A${i}${this.indexSecond === 0 ? "0" + 5 : this.indexSecond * 10 + 5}`;
			        obj.six = `A${i}${this.indexSecond === 0 ? "0" + 6 : this.indexSecond * 10 + 6}`;
			        obj.seven = `A${i}${this.indexSecond === 0 ? "0" + 7 : this.indexSecond * 10 + 7}`;
			        obj.eight = `A${i}${this.indexSecond === 0 ? "0" + 8 : this.indexSecond * 10 + 8}`;
			        obj.nine = `A${i}${this.indexSecond === 0 ? "0" + 9 : this.indexSecond * 10 + 9}`;
			        obj.ten = `A${i}${this.indexSecond === 0 ? "10" : (this.indexSecond + 1) * 10}`;
			        this.cage_item.push(obj);
			      }
				  // console.log(this.cage_item)
				},
				move(e) {
					console.log(e.detail);
					this.scaleValue = e.detail.scale * 0.95;
					console.log(this.scaleValue)
				},
				cageItemStyle(index,index1) {
					if ((index === 2 | index === 3) &&index1 === 'three') {
						return " 	#9E9E9E"   //低风险
					} else if ((index === 5 | index === 6) && index1 === "five") {
						return "#EE9A00;"  //中分险
					} else if ((index === 7 | index === 9) && index1 === "seven") {
						return "#EE4000;"  //高分险
					}
				},
				async getCageList() {
					let baseId = uni.getStorageSync('id');
					let dovecoteNumber = uni.getStorageSync('devomber')
					let option = {
						url: `http://39.99.247.58:9807/equipment/deviceCage/page/${1}/${10}/${baseId}/${dovecoteNumber}`
					}
					let {data} = await myRequest(option);
					console.log('鸽笼列表',data)
				},
				toCageData(item1) {
					uni.navigateTo({
					    url: '../cageData/cageData?item1=' + item1
					});
				}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color:  #F0F0F0;
		height: 100%;
		width: 100%;
		position: relative;

		.select_row {

			display: flex;
			justify-content: center;
			align-items: center;
			// background-color: #FFFFFF;
			padding-bottom: 20rpx;
			margin-top: 10rpx;
			.common {
				display: flex;
				font-size: 32rpx;
				letter-spacing: 2rpx;
				margin-bottom: 26rpx;
				padding: 20rpx;
				height: 50rpx;
				line-height: 50rpx;

				.title {
					font-weight: 700;
					margin-right: 20rpx;
				}

				.content {
					display: flex;


					.uni-input {
						width: 70rpx;
						text-align: center;
						border-bottom: 4rpx solid #8A8A8A;
					}

					.iconfont {
						margin-left: 20rpx;
					}
				}
			}

			.select_col_left {}

			.select_col_right {
				.content {
					.uni-input {
						width: 160rpx;
					}
				}
			}

		}
		movable-area {
			width: 97%;
			height: 95vmin;
			margin-left: 5vmin;
			// background-color: blue;
			text-align: center;
			movable-view {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				 height: 80vmin;
				margin: 0 auto;
				padding-top: 70rpx;
				position: relative;
				.big_box {
					margin: 0 auto;
					.cage_item {
						width: 6.2vmin;
						height: 6.2vmin;
						margin: 1.3vmin;
						border-radius: 1.6vmin;
						box-sizing: border-box;
						// background-color: pink;
						border: 0.5vmin solid #B0E0E6;
						text-align: center;
					} 
				}
			}
		}
		.tips {
			position: fixed;
			left: 20rpx;
			width: 40rpx;
			text-align: center;
			line-height: 8.8vmin;
			font-size: 4vmin;
			color: #EDEDED;
			margin-left: 0rpx;
			border-radius: 10rpx;
			.tips_item {
				height: 8.8vmin;
				width: 5vmin;
				text-align: center;
				background: rgba(0, 0, 0, 0.3);
			}
		}
	}
</style>
